<template>
    <div class="cookie-of">
        <!--设置Cookie-->
        <tittle-one>设置Cookie</tittle-one>
        <div class="cookie-form">
            <div class="form-item">
                <label for="myName">Cookie名：</label>
                <el-input id="myName" type="text" v-model="myCkName" placeholder="输入Cookie名字"></el-input>
            </div>
            <div class="form-item">
                <label for="myCookie">Cookie值：</label>
                <el-input id="myCookie" type="text" v-model="mycookie" placeholder="输入Cookie的值"></el-input>
            </div>
            <div class="form-item">
                <label for="myTime">保存时间：</label>
                <el-input id="myTime" type="text" v-model="saveTime"></el-input>
            </div>
            <el-button type="success" style="margin-top: 0.2rem" @click="setCookie(myCkName, mycookie, saveTime)">确定
            </el-button>
        </div>
        <!-- 获取Cookie -->
        <tittle-one>获取Cookie</tittle-one>
        <div class="cookie-form">
            <div class="form-item">
                <label for="myName1">Cookie名：</label>
                <el-input id="myName1" type="text" v-model="getCkName" placeholder="输入获取的Cookie名字"></el-input>
            </div>
            <div class="form-item">
                <div class="label">Cookie值：</div>
                <el-input id="myCookie1" type="text" v-model="getcookie" placeholder="获取的Cookie的值"></el-input>
            </div>
            <el-button type="primary" style="margin-top: 0.2rem" @click="getCookie(getCkName)">获取</el-button>
        </div>
        <!-- 删除Cookie -->
        <tittle-one>删除Cookie</tittle-one>
        <div class="cookie-form">
            <div class="form-item">
                <label for="myName2">Cookie名：</label>
                <el-input id="myName2" type="text" v-model="delCkName" placeholder="输入获取的Cookie名字"></el-input>
            </div>
            <el-button type="danger" style="margin-top: 0.2rem" @click="delCookie(delCkName)">删除</el-button>
        </div>
      <!--  当前的Cookie    -->
      <tittle-one>当前的Cookie</tittle-one>
      <div class="cookie-form">
        <div>{{allCk}}</div>
      </div>
    </div>
</template>

<script>
  import TittleOne from '../temp/TittleOne.vue'

  export default {
    name: "CookieOf",
    components: {
      TittleOne
    },
    data() {
      return {
        myCkName: '',
        mycookie: '',
        saveTime: 100,
        getCkName: '',
        getcookie: '',
        delCkName: '',
        allCk: ''
      }
    },
    methods: {
      setCookie(cname, value, time) {
        if (cname && value && time) {
          let exdate = new Date();
          exdate.setTime(exdate.valueOf() + time * 24 * 60 * 60 * 1000);
          document.cookie = cname + "=" + encodeURI(value) + ";expires=" + exdate.toGMTString();
          this.$message.success('保存cookie成功！')
        }
        else this.$message.error('输入有空值！')
      },
      getCookie(name) {
        let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
          console.log(arr);
          this.getcookie = decodeURI(arr[2]);
          this.$message.success('获取cookie成功！')
          return this.getcookie
        }
        else {
          this.getcookie = '【无】'
          this.$message.warning('获取cookie的为空！')
        }
        return null
      },
      delCookie(name) {
        if (!name) {
          this.$message.error('输入有空值！')
          return
        }
        let exp = new Date();
        exp.setTime(exp.valueOf() - 1);
        this.getCkName = name
        let cval = this.getCookie(name);
        if (cval != null) {
          const info = `
            <div>
                <div>是否删除该Cookie?</div>
                <strong><i>{
                    "<span style="color: green">${name}</span>" :
                    "<span style="color: orange">${cval}</span>"
                 }</i></strong>
            </div>
          `
          this.$confirm(info, '提示', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      }
    },
    created() {
      this.allCk = document.cookie
    }
  }

</script>

<style lang="less" scoped>
    .cookie-of {
        width: 100%;
        .cookie-form {
            display: flex;
            flex-direction: column;
            padding: 0.5rem;
            .form-item {
                margin: 0.2rem 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                & > * {
                    white-space: nowrap;
                }
                label, .label {
                    width: 30%;
                }
            }
        }
    }
</style>
